window.speakResult = new Vue({
    el: '#exerciseDetail',
    data() {
        return {
            second: 0,//
            time: '',//做题时长
            interVal: '',//
            isFull: false,//是否全屏
            isPop: true,//顶部提示
            content_id: '',//当前题目id
            questionData: '',//题目数据
            current: 0,//当前题目序号
            left: 0,//
            display: 'none',//
            currentTime: '',//音频当前
            totalTime: '00',//音频总时长
            remainingTime: 0,//剩余时长
            isPlay: false,
            answerRemark: [],
            suggest: [],
            phone_score_pro: "",

        }
    },
    created() {
        let that = this;
        that.getData();
    },
    mounted() {
        let that = this;
        that.$nextTick(function () {
            //初始化音频
            that.audio = $('#bgAudio')[0];
            that.addListen();
            // 声音拖拽进度
            $("#dragVolum").draggable({
                    containment: "parent",
                    axis: "x",
                    start: function () {
                        that.audio.pause();
                    },
                    drag: function () {
                        that.left = $('#dragVolum')[0].style.left;
                        that.remainingTime = parseInt(that.audio.duration - parseInt($('#dragVolum')[0].style.left) / 366 * that.audio.duration) + '´';
                    },
                    stop: function () {
                        let time = parseInt($('#dragVolum')[0].style.left) / 366 * that.audio.duration;
                        that.audio.currentTime = time;
                        that.audio.play();
                    },
                }
            );
        });
    },
    destroyed() {

    },
    methods: {
        getData() {
            let that = this;
            $.get('/cn/exercise/spoken-exercise', {
                content_id: $('#content_id').val(),
            }, function (res) {
                if (res.code == 1) {
                    that.content_id = $('#content_id').val();
                    that.questionData = res;
                    that.suggest = res.son[0].suggest
                    if (res.son[0].answerRemark != '') {

                        that.answerRemark = JSON.parse(res.son[0].answerRemark);
                    }

                    that.phone_score_pro = Number(Number(that.answerRemark.phone_score / 9) * 100).toFixed(2) + '%';
                    console.log('that.', that.phone_score_pro);
                    that.time = that.formateSeconds(that.questionData.son[0].time);
                } else {
                    alert(res.message)
                }
            }, 'json')
        },
        goNew(content_id) {
            window.location.href = '/cn/exercise/speak-review?content_id=' + content_id
        },
        //上一题
        prev() {
            let that = this;
            that.questionData.question_list.map((item, index) => {
                if (item.content_id == that.content_id) {
                    if (index > -1) {
                        window.location.href = '/cn/exercise/speak-review?content_id=' + that.questionData.question_list[index - 1].content_id;
                    } else {
                        alert('已经是第一题啦')
                    }
                }
            })
        },
        //下一题
        next() {
            console.log(111)
            let that = this;
            that.questionData.question_list.map((item, index) => {
                if (item.content_id == that.content_id) {
                    if (index + 1 < that.questionData.question_list.length) {
                        window.location.href = '/cn/exercise/speak-review?content_id=' + that.questionData.question_list[index + 1].content_id;
                    } else {
                        alert('已经是最后一题啦')
                    }
                }
            })
        },
        //音频事件监听
        addListen() {
            let that = this;
            that.audio.addEventListener("canplay", function () {
                that.audio.volume = 0.9;
                that.remainingTime = parseInt(that.audio.duration) + '´';
            });
            that.audio.addEventListener("play", function () {

            });
            that.audio.addEventListener("playing", function (event) {
                that.isPlay = true;
            });
            that.audio.addEventListener("pause", function () {

            });
            that.audio.addEventListener("ended", function () {
                that.isPlay = false;
            });
            that.audio.addEventListener("timeupdate", function (event) {
                that.remainingTime = parseInt(that.audio.duration - that.audio.currentTime) + '´';
                that.left = parseInt((that.audio.currentTime / that.audio.duration) * 366) + 'px'
            });
        },
        //  播放/暂停音频
        playAudio() {
            let that = this;
            if (!that.isPlay) {
                that.audio.play();
            } else {
                that.audio.pause();
            }
            that.isPlay = !that.isPlay
        },
        //  全屏、退出全屏
        launchFullscreen() {
            let that = this;
            let element = document.documentElement;
            if (!that.isFull) {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
                that.isFull = true;
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
                that.isFull = false;
            }
        },
        //时间转换
        formateSeconds(endTime) {
            let secondTime = parseInt(endTime);//将传入的秒的值转化为Number
            let min = 0;// 初始化分
            let h = 0;// 初始化小时
            let result = '';
            if (secondTime > 60) {//如果秒数大于60，将秒数转换成整数
                min = parseInt(secondTime / 60);//获取分钟，除以60取整数，得到整数分钟
                secondTime = parseInt(secondTime % 60);//获取秒数，秒数取佘，得到整数秒数
                if (min > 60) {//如果分钟大于60，将分钟转换成小时
                    h = parseInt(min / 60);//获取小时，获取分钟除以60，得到整数小时
                    min = parseInt(min % 60);//获取小时后取佘的分，获取分钟除以60取佘的分
                }
            }
            result = `${h.toString().padStart(2, '00')}:${min.toString().padStart(2, '00')}:${secondTime.toString().padStart(2, '00')}`;
            return result;
        }
    }
});
